<template>
    <div class="sale-detal">
        <div class="ment">
            <p>
                <span>联系人：</span>
                <span>{{details.contractPerson}}</span>
            </p>
            <p>
                <span>联系人电话：</span>
                <span>{{details.phoneNum}}</span>
            </p>
            <p>
                <span>投诉电话：</span>
                <span>400-666-6688</span>
            </p>
        </div>
        <div class="line"></div>
        <div class="listm">
            <div class="top">
                <p class="word">{{details.startDate}}</p>
            </div>
            <div class="center clearfix">
                <div class="img fl">
                    <img :src="details.picture" alt="">
                </div>
                    <div class="title fl">
                        <p class="tits">{{details.tourTitle}} </p>
                    </div>
                </div>
            </div>
            <div class="text">
                <p class="word">问题描述</p>
                <textarea name="" id="" cols="30" rows="15" v-model="complain.complainContent"></textarea>
                <p class="texts">
                    提交服务单后，售后专员可能与您电话沟通，请保持手机畅通
                </p>
            </div>
            <div class="subm" @click="saleNow()">
                提交
            </div>

        </div>
</template>

<script>
import http from "@/assets/js/axios";
import httpr from "@/assets/js/axiosr";
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            userToken: '',
            details: '',
            queryParam: {
                orderId: ''
            },
            complain: {
                complainContent: '', //问题描述
                orderId: '', //订单ID
                // relatedPics: '' //证明图片
            }
        }
    },
    components: {

    },
    mounted() {
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        let poctId = this.$route.query.id;
        this.queryParam.orderId = poctId
        this.complain.orderId = poctId
        // if (!this.userToken) {
        //     this.$router.push('/index')
        // }
        this.saleDeatilsNow()
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        saleDeatilsNow: async function () {
            const res = await httpr.post('tour_order_search/detail?token=' + this.userToken, this.queryParam)
            // console.log(res);
            if (res.data.code == 100) {
                Toast({ message: res.data.message, duration: 1000 })
                this.details = res.data.data
            } else {
                Toast({ message: res.data.message, duration: 1000 })
            }
        },
        saleNow: async function () {
            const res = await httpr.post('tour_order/order_complain?token=' + this.userToken, this.complain)
            // console.log(res);
            if (res.data.code == 100) {
                Toast({ message: res.data.message, duration: 1000 })
                this.$router.push('saleApply')
            } else {
                Toast({ message: res.data.message, duration: 1000 })
            }
        },
    }
}
</script>

<style lang="stylus" scoped>
.sale-detal {
    .line {
        width: 100%;
        height: 12px;
        background: rgba(240, 240, 240, 1);
    }

    .ment {
        width: 100%;
        padding: 0 15px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);

        p {
            height: 30px;
            line-height: 30px;
        }
    }

    .listm {
        padding: 0 13px;
        border-bottom: 10px solid rgba(240, 240, 240, 1);

        .top {
            width: 100%;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid rgba(240, 240, 240, 1);

            .word {
                font-size: 14px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
            }
        }

        .center {
            border-bottom: 1px solid rgba(240, 240, 240, 1);
            margin-top: 10px;
            padding-bottom: 10px;

            .img {
                width: 80px;
                height: 80px;

                img {
                    width: 80px;
                    height: 100%;
                }
            }

            .title {
                margin-left: 10px;
                width: 240px;

                .tits {
                    font-size: 12px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                }
            }
        }
    }

    .text {
        padding: 15px;

        p.word {
            font-size: 16px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }

        textarea {
            margin-top: 10px;
            width: 100%;
            background-color: #f0f0f0;
            border-radius: 10px;
        }

        .texts {
            font-size: 14px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
        }
    }

    .subm {
        margin: 0 auto;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
        width: 330px;
        height: 50px;
        line-height: 50px;
        background: rgba(194, 223, 90, 1);
        border-radius: 10px;
        font-size: 18px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
}
</style>
